import Image from "next/image"
import { Header } from "@/components/layout/header"
import { BottomNav } from "@/components/layout/bottom-nav"
import { Button } from "@/components/ui/button"
import { ShoppingCart } from 'lucide-react'

const products = [
  {
    id: 1,
    name: "Shrilmps T恤",
    price: 700,
    image: "/placeholder.svg?height=400&width=400",
  },
  {
    id: 2,
    name: "Shrilmps 卫衣",
    price: 620,
    image: "/placeholder.svg?height=400&width=400",
  },
  // Add more products...
]

export default function HomePage() {
  return (
    <div className="min-h-screen pb-16">
      <Header />
      
      <main className="p-4">
        {/* Promotional Banner */}
        <div className="mb-6 overflow-hidden rounded-xl bg-amber-100 p-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-bold">新品上市</h2>
              <p className="text-sm text-gray-600">Shrilmps T恤 夏季款</p>
              <p className="text-xs text-gray-500">2021.6.13-8.13</p>
            </div>
            <Image
              src="/placeholder.svg?height=120&width=120"
              alt="Promotion"
              width={120}
              height={120}
              className="rounded-lg"
            />
          </div>
        </div>

        {/* Category Tabs */}
        <div className="mb-6 flex gap-4 overflow-x-auto whitespace-nowrap">
          <button className="rounded-full bg-amber-100 px-4 py-1 text-sm font-medium">全部</button>
          <button className="rounded-full px-4 py-1 text-sm font-medium text-gray-500">最新</button>
          <button className="rounded-full px-4 py-1 text-sm font-medium text-gray-500">销量高</button>
          <button className="rounded-full px-4 py-1 text-sm font-medium text-gray-500">好评</button>
        </div>

        {/* Product Grid */}
        <div className="grid grid-cols-2 gap-4">
          {products.map((product) => (
            <div key={product.id} className="overflow-hidden rounded-xl border bg-white">
              <Image
                src={product.image}
                alt={product.name}
                width={400}
                height={400}
                className="aspect-square object-cover"
              />
              <div className="p-3">
                <h3 className="font-medium">{product.name}</h3>
                <div className="mt-2 flex items-center justify-between">
                  <p className="text-lg font-bold">¥{product.price}</p>
                  <Button size="icon" variant="ghost">
                    <ShoppingCart className="h-5 w-5" />
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </main>

      <BottomNav />
    </div>
  )
}

